function industry(){
    let myChart = echarts.init(document.querySelector(".bar_industry .chart"));
    let option =  {
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '0%',
            top:10,
            bottom: '4%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ["万安镇", "金山镇", "白马镇", "新盛镇", "鄢家镇","略坪镇","调元镇"],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel:{
                    color:"rgba(255,255,255,.6",
                    fontSize:12,
                    interval:0,
                    rotate:30,
                },
                axisLine:{
                    show:false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel:{
                    color:"rgba(255,255,255,.6",
                    fontSize:12
                },
                axisLine:{
                    lineStyle:{
                        color:"rgba(255,255,255,.1)"
                    }
                },
                splitLine: {
                    lineStyle: {
                       color: "rgba(255,255,255,.1)"
                     }
                }
            }
        ],
        series: [
            {
                name: '隐患数量',
                type: 'bar',
                barWidth: '35%',
                data: [1, 15, 26, 12, 8, 36,4]
                // itemStyle:{
                //     barBorderRadius:5
                // }
            }
        ],
    };
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
    myChart.on('click',function(){
       location.href='/echarts/自然资源局/index.html'
    })
}
industry();


function skill(){
    let myChart = echarts.init(document.querySelector(".bar_skill .chart"));
    let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    let option = {
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'shadow'
        //     }
        // },
        grid: {
            top: "10%",
            left: "22%",
            bottom: "10%"
        },
        xAxis: {
            show:false
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                data: ["万安", "金山", "白马", "新盛", "鄢家","略坪","调元"],
                //不显示y轴线条
                axisLine: {
                    show: false
                        },
                // 不显示刻度
                axisTick: {
                show: false
                },
                axisLabel:{
                    color:"#fff"
                }
            },
            {
                type: 'category',
                inverse: true,
                data: [24, 32, 12, 14, 19,5,10],
                //不显示y轴线条
                axisLine: {
                    show: false
                        },
                // 不显示刻度
                axisTick: {
                show: false
                },
                axisLabel:{
                    color:"#fff",
                    fontSize:12
                }
            },
        ],
        series: [
            {
                name: 'bar',
                type: 'bar',
                barCategoryGap:50,
                barWidth:10,
                itemStyle:{
                        barBorderRadius:20,
                        // params 传进来的是柱子对象
                        color:function(params){
                            // dataIndex 是当前柱子的索引号
                            return myColor[params.dataIndex];
                        } 
                },
                data: [23, 30, 11, 13, 18,5,10],
                // label:{
                //     normal:{
                //         show: true,
                //         // 图形内显示
                //         position: "inside",
                //         // 文字的显示格式
                //         formatter: "{c}%"
                //     }
                // },
                yAxisIndex: 0,
            },
            {
                name: 'box',
                type: 'bar',
                barCategoryGap: 50,
                barWidth: 15,
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15
                },
                data: [100, 100, 100, 100, 100,100,100],
                yAxisIndex: 1,
            }
        ]
    }; 
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
    myChart.on('click',function(){
        location.href='/echarts/燃气行业/index.html'
     })
}
skill();

(function(){
    let yearData = [
        {
          year: '2020',  // 年份
          data: [  // 两个数组是因为有两条线
                [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
            ]
        },
        {
          year: '2021',  // 年份
          data: [  // 两个数组是因为有两条线
                [48.7, 26.4, 28.7, 70.7, 48.3,76.4],
                [14.3, 43, 60,13.1, 16.5, 82]
            ]
        }
    ];
    let month=[
        ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        ['1月', '2月', '3月', '4月', '5月', '6月']
    ];
    let myChart = echarts.init(document.querySelector(".line_staff .chart"));
    let colors = ['#5793f3', '#d14a61'];
    let option = {
        color: colors,
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            textStyle: {
                color: 'rgba(255,255,255,0.7)' // 图例文字颜色
              },
            right: '10%' // 距离右边10%
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    show:false
                },
                axisLabel:{
                    interval:0
                },
                axisLine: {
                    show: false ,// 去除轴线
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '去年' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: month[0],//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                boundaryGap: false  // 去除轴内间距
            },
            {
                type: 'category',
                axisTick: {
                    show:false
                },
                axisLine: {
                    show: false ,// 去除轴线
                    lineStyle: {
                        color: colors[0]
                    }
                },
                boundaryGap: false, // 去除轴内间距
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '今年  ' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: month[1],
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    show: false  // 去除刻度
                  },
                axisLabel: {
                    color: 'rgba(255,255,255,0.7)', // 文字颜色
                   
                },
                splitLine: {
                    lineStyle: {
                      color: '#012f4a' // 分割线颜色
                    }
                }
            }
        ],
        series: [
            {
                name: '去年',
                type: 'line',
                // xAxisIndex: 1,
                smooth: true,
                data: yearData[0].data[0]
            },
            {
                name: '今年',
                type: 'line',
                smooth: true,
                data: yearData[0].data[1]
            }
        ]
    };
    myChart.setOption(option);
    let year = document.querySelectorAll(".title a")
    for(let i = 0;i<year.length;i++){
        year[i].addEventListener("click",function(){
            option.series[0].data = yearData[i].data[0];
            option.series[1].data = yearData[i].data[1];  
            option.xAxis[0].data=month[i]
            option.xAxis[1].data=month[i]
            myChart.setOption(option);     
        });
    }
   
    window.addEventListener("resize",function(){
        myChart.resize();
    });
})();

function flow(){
    let myChart = echarts.init(document.querySelector(".line_flow .chart"));
    let option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "#4c9bfd",
                fontSize: "12"
            }
        },
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
                // 文本颜色为#4c9bfd  文字大小为 12
                axisLabel: {
                    textStyle: {
                    color: "#4c9bfd",
                    fontSize: 12
                    }
                },
                // x轴线的颜色为   rgba(255,255,255,.2)
                axisLine: {
                    lineStyle: {
                    color: "rgba(255,255,255,.2)"
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                // 文本颜色为#4c9bfd  文字大小为 12
                axisLabel: {
                    textStyle: {
                    color: "#4c9bfd",
                    fontSize: 12
                    }
                },
                // x轴线的颜色为   rgba(255,255,255,.2)
                axisLine: {
                    lineStyle: {
                    color: "rgba(255,255,255,.2)"
                    }
                },
                // 修改分割线的颜色
                splitLine: {
                    lineStyle: {
                    color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: '增长量',
                smooth: true,
                type: 'line',
                // 单独修改线的样式
                lineStyle: {
                    color: "#0184d5",
                    width: 2 
                },
                // 填充区域
                areaStyle: {
                        // 渐变色，只需要复制即可
                color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                        {
                            offset: 0,
                            color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                        },
                        {
                            offset: 0.8,
                            color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                        }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: 8,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                data: [ 30, 40, 50, 40,80, 40, 80,60,20, 40, 30, 40, 30, 40,80, 40, 90,60,80, 40, 80, 40, 30, 40,30, 40, 80,60,50, 40],
            },
            {
                name: '减少量',
                smooth: true,
                type: 'line',
                // 单独修改线的样式
                lineStyle: {
                    color: "#00d887",
                    width: 2 
                },
                // 填充区域
                areaStyle: {
                        // 渐变色，只需要复制即可
                color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(0, 216, 135, 0.4)"
                              },
                              {
                                offset: 0.8,
                                color: "rgba(0, 216, 135, 0.1)"
                              }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: 8,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#00d887",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
            }
        ]
    }
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
    myChart.on('click',function(){
        location.href='/echarts/水利安全/index.html'
     })
}
flow();

function age(){
    let myChart = echarts.init(document.querySelector(".pie_age .chart"));
    let option = {
        color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
          ],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            // 距离底部为0%
            bottom: "0%",
            // 小图标的宽度和高度
            itemWidth: 10,
            itemHeight: 10,
            data: ["严重隐患", "一般隐患", "低风险隐患", "整改隐患", "发现隐患"],
            // 修改图例组件的文字为 12px
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [
            {
                name: "隐患分布",
                type: "pie",
                // 设置饼形图在容器中的位置
                center: ["50%", "40%"],
                //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
                radius: ["40%", "60%"],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1, name: "严重隐患" },
                    { value: 4, name: "一般隐患" },
                    { value: 2, name: "低风险隐患" },
                    { value: 2, name: "整改隐患" },
                    { value: 1, name: "发现隐患" }
           ] ,
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
age();




function area(){
    let myChart = echarts.init(document.querySelector(".pie_area .chart"));
    let option ={
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            // 距离底部为0%
            bottom: "0%",
            // 小图标的宽度和高度
            itemWidth: 8,
            itemHeight: 8,
            // 修改图例组件的文字为 12px
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "10"
            }
        },
        series: [
            {
                name: '安全生产现状图',
                type: 'pie',
                radius: ['10%', '70%'],
                center: ['50%', '40%'],
                // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
                label: {
                    fontSize: 10
                },
                // 引导线调整
                labelLine: {
                    // 连接扇形图线长
                    length: 6,
                    // 连接文字线长
                    length2: 5
                } ,
                roseType: "radius",
                data: [
                    { value: 20, name: '沼气池' },
                    { value: 26, name: '化粪池' },
                    { value: 24, name: '农业机械' },
                    { value: 25, name: '屠宰场' },
                    { value: 20, name: '饲料厂' }
                ]
            }
        ]
    }
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
area();

(function() {
    $.get('./js/luojiang.json', function (geoJson) {
        let myChart = echarts.init(document.querySelector(".map .chart"));

        echarts.registerMap('LJ', geoJson);
        let itemStyle={
            normal: {
                areaColor: 'rgba(120,152,225, 0.2)',
                borderColor: '#00d887',
                borderWidth: 2,
                shadowBlur: 10,
                areaColor: 'rgba(120,152,225, 0.3)',
            },
            emphasis: {
                areaColor: 'rgba(120,152,225, 0.8)'
            }
        }
        



       let color= ['#ed8884', '#ff9f7f', '#006cff','#60cda0']//'#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
        var markPointData = [{
            name: "罗江区气象局",
            coord: [
                104.507653,31.320943  //坐标，通过百度地图提取
            ],
            itemStyle:{
                normal:{
                    color:color[0]
                }
            },
            // symbol: '/img/1.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "新盛镇卫生院",
            coord: [
                104.64488,31.271227
            ],
            itemStyle:{
                normal:{
                    color:color[1]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "罗江县新盛镇土城社区村民委员会",
            coord: [
                104.607272,31.257105
            ],
            itemStyle:{
                normal:{
                    color:color[2]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "罗江区调元镇顺河村村委会",
            coord: [
                104.494823,31.381504
            ],
            itemStyle:{
                normal:{
                    color:color[3]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "中共罗江县白马关镇委员会",
            coord: [
                104.522285,31.247381
            ],
            itemStyle:{
                normal:{
                    color:color[1]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "白马关镇",
            coord: [
                104.458958,31.297164
            ],
            itemStyle:{
                normal:{
                    color:color[3]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "鄢家镇人民政府",
            coord: [
                104.58263,31.288613
            ],
            itemStyle:{
                normal:{
                    color:color[2]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "罗江县公安局鄢家派出所",
            coord: [
                104.574718,31.291884
            ],
            itemStyle:{
                normal:{
                    color:color[1]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "调元派出所",
            coord: [
                104.477219,31.375766
            ],
            itemStyle:{
                normal:{
                    color:color[0]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "调元镇卫生院",
            coord: [
                104.473531,31.375379
            ],
            itemStyle:{
                normal:{
                    color:color[1]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "罗江万安镇升平小区",
            coord: [
                104.513329,31.316732
            ],
            itemStyle:{
                normal:{
                    color:color[2]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "罗江县天然气有限公司",
            coord: [
                104.511175,31.299704
            ],
            itemStyle:{
                normal:{
                    color:color[3]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "罗江县新盛镇土城社区村民委员会",
            coord: [
                104.607272,31.257105
            ],
            itemStyle:{
                normal:{
                    color:color[2]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "罗江万安小区",
            coord: [
                104.513377,31.315361
            ],
            itemStyle:{
                normal:{
                    color:color[1]
                }
            },
            // symbol: '/img/2.png',  // 标注图片地址路径
            symbolSize: 40,
        },{
            name: "罗江县龙洲天然气有限责任公司",
            itemStyle:{
                normal:{
                    color:color[0]
                }
            },
            coord: [
                104.541597,31.384088
            ],
            // symbol: '/img/3.png',  // 标注图片地址路径
            symbolSize: 40,
        },
        {
            name: "罗江县略坪镇政府",
            itemStyle:{
                normal:{
                    color:color[1]
                }
            },
            coord: [
                104.411794,31.339464
            ],
            // symbol: '/img/3.png',  // 标注图片地址路径
            symbolSize: 40,
        }

       
    ];
        myChart.setOption(option = {
           
            title: {
                text: '安全隐患分布',
                color:'#fff',
                x:'20px',
                y:'20px',
                // subtext: '人口密度数据来自Wikipedia',
                textStyle:{
                       color:'#fff'
               }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c}'
            },
           
            geo: {
	            show: true,
	            map: 'LJ',
	            label: {
	                emphasis: {
	                    show: false
	                }
	            },
	            roam: false,
	            itemStyle: {
	                normal: {
	                    borderColor: '#4085d3',
		                borderWidth: 1.5,
		                shadowColor: '#000',
		                shadowBlur: 50,
		                areaColor: '#565cf8',
	                },
	                emphasis: {
	                    areaColor: '#4f92fa'  //鼠标移上每一省份的颜色
	                }
	            }
	        },
            
            series: [
                {
                    name: '香港18区人口密度',
                    type: 'map',
                    mapType: 'LJ', // 自定义扩展图表类型
                    label: {
                        show: true,
                        color:'#fff'
                    },
                    markPoint: { //图表标注。
                        label: {
                            normal: {
                                show: true,
                            },
                            emphasis: {
                                show: true,
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(72,150,128,1)'
                            }
                        },
                        data: markPointData
                    },
                    // zoom: 1.2,
                    // opacity: 0.3,
                    data: [
                        {name: '蟠龙镇', value: 20057.34, itemStyle:itemStyle ,
                       
                    
                    },
                        {name: '金山镇', value: 31686.1,itemStyle:itemStyle },
                        {name: '鄢家镇', value: 44045.49,itemStyle:itemStyle },
                        {name: '新盛镇', value: 40689.64,itemStyle:itemStyle },
                        {name: '略坪镇', value: 37659.78,itemStyle:itemStyle },
                        {name: '白马关镇', value: 45180.97,itemStyle:itemStyle },
                        {name: '调元镇', value: 55204.26,itemStyle:itemStyle },
                        {name: '万安镇', value: 21900.9,itemStyle:itemStyle },
                        
                    ],
                    
                }
            ]
        });
    window.addEventListener("resize",function(){
        myChart.resize();
    });
    myChart.on('click',function(params){ //点击事件
       if(params.componentType==='markPoint'){

       }else{

       }
    });
});
})();
